<style>
.complain-wrap{
  margin:0 0 10px;;
}
</style>

<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <tab :line-width='2' class="lltab">
    <tab-item :selected="selectedNum=='1'" @on-item-click="goLink(1)">未处理</tab-item>
    <tab-item :selected="selectedNum=='2'" @on-item-click="goLink(2)">已处理</tab-item>
  </tab>
  <scroller lock-x height="-54" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="0" v-show="todolist.length>0">
    <div>
      <div class="complain-wrap" v-for="item in todolist">
        <div class="complain-hd displayflex">
          <span class="flex1" v-if="item.IsAnonymous == 'Y'">匿名用户</span>
          <span class="flex1" v-else>{{item.FeedbackName}}</span>
          <em>{{item.FeedbackTime | timeshort}}</em>
        </div>
        <div class="complain-by">{{item.Memo}}</div>
        <template v-if="item.ReplyFeedbackGuid != '' && item.ReplyFeedbackGuid != null">
          <div class="complain-reply">
            <div class="msg displayflex"><span class="flex1 icon">运营中心客服</span><em>{{item.ReplyFeedbackName}}</em></div>
            <div class="txt">{{item.ReplyMemo}}</div>
          </div>
        </template>
      </div>
    </div>
    <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
  </scroller>
  <div class="noDate_page" v-if="todolist.length<=0">
    <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
    未找到相关数据
  </div>
</div>
</template>

<script>
export default {
  data() {
    return{
      todolist: [],
      query: {},
      showLoad:false,
      selectedNum: 1,
      count: 0,
      pageindex: 1,
      totalLength: 0,
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  created() {
    var type = this.$route.query.type;
    console.log(this.userinfo)
    if (type) {
      this.goLink(type);
    } else {
      this.selectedNum = "1";
      this.getData();
    }
  },
  methods:{
    getData(){
      var self = this;
      if (this.totalLength == this.todolist.length && this.todolist.length > 0) {
        return false;
      }
      
      this.showLoad = true;

      this.query.TenantGuid = this.userinfo.TenantGuid,
      this.query.CorpGuid = this.userinfo.CorpGuid,
      this.query.PageIndex = this.pageindex;
      this.query.FeedbackGuid = this.userinfo.StaffID;
      this.query.PageSize = 8;

      this.Ajax.post("SearchFeedbackList", self.query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          
          if (result.length > 0) {
            self.todolist = self.todolist.concat(result);
            self.pageindex++;
            self.count = 0;
          }

          self.totalLength = resp.TotalRecords;

          if (self.pageindex == 2) {
            self.$nextTick(() => {
              self.$refs.scrollerBottom.reset({
                top: 0
              });
            });
          }
        }
      });
    },
    goLink(type) {
      var self = this;
      this.todolist = [];
      this.query = {};
      this.selectedNum = type;
      if (type == "1") {
        self.query.type = "1";
      } else if (type == "2") {
        self.query.type ="2";
      }
      this.resetGet();
    },
    resetGet() {
      this.todolist = [];
      this.count = 0;
      this.pageindex = 1;
      this.getData();
    },
    onScrollBottom() {
      this.count++;
      if (this.count == 1) {
        this.getData();
      }
    },
  }
}
</script>
